$(function () {
    let phone = $('.phone');
    let verifBtn = $('.mi-form-verif>button');
    let verif = $('.mi-form-verif>input');
    let btn = $('.mi-form-button');
    let checkBtn = $('.mi-form-terms>input');
    const iphone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

    phone.on({
        focus() {
            phone.prev().prev().prev().css({
                'border': '1px solid #ff5c00',
                'border-right': 'none'
            })
        },
        blur() {
            phone.prev().prev().prev().css('border', 'none');
        },
        input() {
            if (phone.val() === "") {
                phone.prev().prev().prev().css('background', '#fbf2f3');
                phone.css('background', '#fbf2f3');
                $('.phonespan').css('color', 'red');
                phone.prev().prev().css('color', 'red');
                phone.next().next().css('display', 'block');
            } else {
                if (verif.val() === "") {
                    btn.css('opacity', '.4');
                    btn.css('pointer-events', 'none')
                } else {
                    btn.css('opacity', '1');
                    btn.css('pointer-events', 'auto')
                }
                phone.prev().prev().prev().css('background', '#f9f9f9');
                phone.css('background', '#f9f9f9');
                $('.phonespan').css('color', '#ddd')
                phone.prev().prev().css('color', '#ddd')
                phone.next().next().css('display', 'none');
                phone.next().next().text('请输入手机号');
            }
        }
    })

    verif.on('input', function () {
        if (verif.val() === "") {
            verif.css('background', '#fbf2f3');
            verif.next().css('color', 'red');
            verif.next().next().css('background', '#fbf2f3');
            verif.next().next().next().css('display', 'block');
        } else {
            if (phone.val() === "") {
                btn.css('opacity', '.4');
                btn.css('pointer-events', 'none')
            } else {
                btn.css('opacity', '1');
                btn.css('pointer-events', 'auto')
            }
            verif.css('background', '#f9f9f9');
            verif.next().css('color', '#ddd');
            verif.next().next().css('background', '#f9f9f9');
            verif.next().next().next().css('display', 'none');
        }
    })

    verifBtn.on('click', function (ev) {
        ev.preventDefault();
        verifBtn.css({
            'font-size': '18px',
            'color': 'green'
        })
        vali(verifBtn);
    })

    btn.on('click', function (ev) {
        ev.preventDefault();
        if (iphone.test(phone.val())) {
            if (verif.val() === verifBtn.text()) {
                if (checkBtn[0].checked) {
                    $.ajax({
                        type: "get",
                        url: "../interface/login.php",
                        data: {
                            account: phone.val()
                        },
                        dataType: "json"
                    }).then(res => {
                        if (res === null) {
                            $.ajax({
                                type: "post",
                                url: "../interface/register.php",
                                data: {
                                    account: phone.val(),
                                    phone: phone.val()
                                },
                                dataType: "json"
                            })
                            alert('注册成功');
                            setTimeout(() => {
                                self.location = './login.html'
                            }, 1000);
                        } else {
                            phone.prev().prev().prev().css('background', '#fbf2f3');
                            phone.css('background', '#fbf2f3');
                            $('.phonespan').css('color', 'red');
                            phone.prev().prev().css('color', 'red');
                            phone.next().next().css('display', 'block');
                            phone.next().next().text('用户名已存在');
                            phone.val("");
                            verif.val("");
                            vali(verifBtn);
                        }
                    }).catch(xhr => {
                        console.log(xhr.status)
                    })
                } else {
                    alert('请你同意用户条款');
                }
            } else {
                vali(verifBtn);
                verifBtn.css({
                    'font-size': '18px',
                    'color': 'green'
                })
                verif.next().next().next().css('display', 'block');
                verif.css('background', '#fbf2f3');
                verif.next().css('color', 'red');
                verif.next().next().css('background', '#fbf2f3');
                verifBtn.next().text('验证码错误');
                verif.val("")
            }
        } else {
            phone.prev().prev().prev().css('background', '#fbf2f3');
            phone.css('background', '#fbf2f3');
            $('.phonespan').css('color', 'red');
            phone.prev().prev().css('color', 'red');
            phone.next().next().css('display', 'block');
            phone.next().next().text('电话号码错误');
        }



    })


})

function vali(el) {
    let str = ""
    for (let i = 0; i < 5; i++) {
        let rand = parseInt(Math.random() * 3 + 1);
        switch (rand) {
            case 1:
                let randNum = parseInt(Math.random() * (57 - 48 + 1) + 48);
                str += String.fromCharCode(randNum)
                break;
            case 2:
                let randCapit = parseInt(Math.random() * (90 - 65 + 1) + 65);
                str += String.fromCharCode(randCapit)
                break;
            case 3:
                let randLower = parseInt(Math.random() * (122 - 97 + 1) + 97);
                str += String.fromCharCode(randLower)
                break;
        }
    }
    return el.text(str)
}